<template>
    <view class="BpmMyEventsList">
        <radio-group v-if="conf.mode == 'default'" @change="change">
            <view v-for="(item,index) in ProcessList" :key="index" class="Bpm-Process">
                <view class="Bpm-Process-box">
                    <view class="Bpmradio-btn">
                        <radio :value="item.instId"/>
                    </view>
                    <view>
                        <div class="rx-relate-commen">
                            <view style="font-size: 1rem">{{ item.subject }}</view>
                            <div><span>{{ i18n('orderNumber', '业务单号') }}:</span><span>{{ item.billNo }}</span></div>
                        </div>
                        <view class="BpmMyEventsState">
							<span class='inst-list-status'
                                  style='color:#fff;background:#487cff'
                                  v-if="statusMap[item.status]">{{ statusMap[item.status].text }}</span>
                        </view>
                    </view>
                </view>
            </view>
        </radio-group>
        <checkbox-group v-else @change="change">
            <view v-for="(item,index) in ProcessList" :key="index" class="Bpm-Process">
                <view class="Bpm-Process-box">
                    <view class="Bpmradio-btn">
                        <checkbox :value="item.instId"/>
                    </view>
                    <view>
                        <div class="rx-relate-commen">
                            <view style="font-size: 1rem">{{ item.subject }}</view>
                            <div><span>{{ i18n('orderNumber', '业务单号') }}:</span><span>{{ item.billNo }}</span></div>
                        </div>
                        <view class="BpmMyEventsState">
                            <span class='inst-list-status' style='color:#fff;background:#487cff'
                                  v-if="statusMap[item.status]">{{ statusMap[item.status].text }}</span>
                        </view>
                    </view>
                </view>
            </view>
        </checkbox-group>
    </view>
</template>

<script>
export default {
    name: "BpmMyEventsList",
    data() {
        return {
            statusMap: {
                DRAFTED: {
                    color: 'gray',
                    text: this.i18n('draft', '草稿')
                },
                RUNNING: {
                    color: 'red',
                    text: this.i18n('running', '运行中')
                }, //运行
                SUPSPEND: {
                    color: 'black',
                    text: this.i18n('suspend', '暂停')
                }, //运行
                CANCEL: {
                    color: 'red',
                    text: this.i18n('cancel', '作废')
                }, //作废
                SUCCESS_END: {
                    color: 'green',
                    text: this.i18n('success', '成功')
                }, // 成功结束
                ERROR_END: {
                    color: 'red',
                    text: this.i18n('abort', '异常结束')
                }, //异常结束
                ARCHIVED: {
                    color: 'green',
                    text: this.i18n('archived', '归档')
                }, //归档
                LOCKED: {
                    color: 'orange',
                    text: this.i18n('lock', '驳回时锁定')
                },
            },
        }
    },
    props: {
        ProcessList: '',
        conf: '',
    },
    created() {
    },
    mounted() {
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmLang", key);
        },
        change(e) {
            this.$emit('change', e)
        }
    },
    watch: {}
}
</script>

<style scoped>
.rx-relate-commen > div {
    display: flex;
    align-items: baseline;
}

.rx-relate-commen {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.rx-relate-commen div span:first-child {
    color: #9eacbb;
    min-width: 4rem;
    margin-top: 0.5rem;
    display: inline-block;
    margin-right: .6rem;
}

.Bpm-Process-box {
    position: relative;
    top: 10px;
    background: #fff;
    border-radius: 0.3rem;
    box-shadow: 1px 1px 5px #dce1e6;
    display: flex;
}
.Bpm-Process-box h1 {
    font-size: 1rem;
    font-weight: normal;
    line-height: 20px;
    padding-left: .8rem;
    padding-top: 1.2rem;
    padding-right: 1rem;
}
.Bpmradio-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
}

.BpmMyEventsState {
    position: absolute;
    right: 0;
    top: 0rem;
}

.inst-list-status {
    font-size: 12px;
    border-radius: 0 0.3rem 0 0.3rem;
    padding: 0.1rem 0.3rem;
}

.Bpm-Process {
    margin-bottom: 10px;
}
</style>
